import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

//导入各个模块的路由 - 必须
import PersonalRoutes from './routes/personal'

//异步添加路由
// import GoodsRoutes from './routes/goods'
// import SystemRoutes from './routes/system'
// import OrderRoutes from './routes/order'
// import MinashopRoutes from './routes/mina-shop'
// import MemberRoutes from './routes/meber'
// import CartRoutes from './routes/cart'

// 导入各个页面的路由组件
import Dashboard from '@/pages/dashboard'
import Welcome from '@/pages/welcome'
import SiderBar from '@/components/siderbar'

import Login from '@/pages/login'

import ErrorPage from "@/pages/error"
import Error401 from "@/pages/error/401"
import Error404 from "@/pages/error/404"

//导入所有的动态组件映射 RouteComponents
import * as RouteComponents from './map'

Vue.use(Router)

//预先本地读取的路由
let routes = [];
if (store.state.system.routes && store.state.system.routes.length > 0) {
  //遍历
  routes = filterAsyncRouter(store.state.system.routes, '/dashboard/');
}

const router = new Router({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      components: {
        default: Dashboard,
        siderbar: SiderBar
      },
      redirect: '/dashboard/welcome',
      meta: {
        requiresAuth: true, //需要登录访问的标识
      },
      children: [
        PersonalRoutes,//个人信息模块路由
        ...routes,
        // GoodsRoutes, // 商品模块路由 1
        // SystemRoutes,//系统管理路由 2
        // OrderRoutes,//订单管理模块 3
        // MinashopRoutes,//小程序商城管理模块 4
        // CartRoutes,//用户购物车模块 5
        // MemberRoutes,//会员管理模块 6
        {
          path: '/dashboard/welcome',
          component: Welcome
        },
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: "/error",
      component: ErrorPage,
      children: [
        {
          path: "404",
          component: Error404
        },
        {
          path: "401",
          component: Error401
        }
      ]

    },
    {
      path: '*',
      redirect: '/dashboard/welcome'
    }
  ]
})

//定义一个方法用于验证是否已经登录(可以根据state中的用户的token来判断是否已经登录成功)
function isLogin() {
  if (store.state.user.info.access_token != "") {
    return true;
  }
  return false;
}

//映射动态路由数据
function filterAsyncRouter(routes, prefix) {//递归路由对象routes  , path 前缀 prefix
  return routes.map((item) => {
    let route = {};
    if (item.component) {
      route.path = prefix + item.path;//拼接前缀地址
      route.component = RouteComponents[item.component];
      route.title = item.title;
    }
    if (item.redirect) {
      route.redirect = item.redirect;
    }
    if (item.meta) {
      route.meta = item.meta;
    }

    if (item.children && item.children.length) {//如果当前路由有子路由，需要再进行子路由的递归映射处理
      route.children = filterAsyncRouter(item.children, route.path + '/');//使用递归
    }
    //返回处理完的数据
    return route;
  })
}

//处理并且动态追加路由
function dynamicAddRoutes(menuList) {
  //遍历
  const routes = filterAsyncRouter(menuList, '/dashboard/');
  //追加路由
  routes.forEach(item => {
    router.options.routes[0].children.push(item);
  })

  let parentRoute = [{
    path: '/dashboard',
    components: {
      default: Dashboard,
      siderbar: SiderBar
    },
    redirect: '/dashboard/welcome',
    meta: {
      requiresAuth: true, //需要登录访问的标识
    },
    children: routes
  }];
  //动态添加404 路由
  parentRoute.push(
    {
      path: '*',
      redirect: '/dashboard/welcome'
    }
  );

  router.addRoutes(parentRoute);
}

//检测当前账号角色是否具有访问权限
// function isHasPower(to){
//  return to.matched.every(record => {
//     // console.log(record.meta.requiresRole,store.state.user.info.user_role);
//     if(record.meta.requiresRole){
//         if(record.meta.requiresRole.includes(store.state.user.info.user_role*1)){
//           return true;
//         }
//         return false;
//     }else{
//       return true;
//     }
//   })
// }

//遗留问题：就是路由的跳转已经实现， 但是跳转的时候没有父子路由的内容？？

// 使用路由前置守卫，来实现登录拦截
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {//验证当前访问路由是否需要登录
    //判断是否已经登录
    if (isLogin()) { //已经登录
      //首次检测是否已经登录，如果已经登录 ，获取角色所有的前端路由
      //登录之后 ： 校验本地是否已经获取过菜单数据，如果没有则调取接口数据（获取之后会存储在本地仓库）
      // console.log(store.state.system.routes);
      if (!store.state.system.routes) {
        store.commit('system/setIsLoading', true);
        Vue.prototype.$http.getSystemRoute().then((res) => {
          store.commit('system/setIsLoading', false);
          if (res && res.data.data) {//用户有返回路由才需要处理
            //添加动态路由(并进行路由排序)
            let menuList = res.data.data.sort((a, b) => a.sort - b.sort);
            store.dispatch('system/saveRoutes', menuList);
            //执行处理路由数据 , 把后台返回的对应的组件字段指向对应的组件（后端返回的是字符串）
            // console.log(RouteComponents);
            //执行动态追加路由方法
            dynamicAddRoutes(menuList);
          }else{
            store.dispatch('system/saveRoutes', []);
          }
          // console.log(router);
          next();
        })
      } else {
        next();
      }

      //操作鉴权还需要根据当前的登录角色来判断是否由权限
      //  if(isHasPower(to)){
      //     next();
      //  }else{
      //    next({
      //      path:"/error/401"
      //    })
      //    console.log('当前账号没有权限访问！');
      //  }
    } else {//未登录
      //为了考虑到登录成功之后 ，还需要跳转回到登录之前的拦截地址，可以传递一个参数
      // = >  /login?redirect=/user 
      next({
        path: "/login",
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {//不需要登录的路由，直接放行
    next();
  }
})

export default router